<template>
  <el-row class="search-box">
    <el-col :span="12">
      <el-date-picker
        v-model="search.startTime"
        type="date"
        :class="dateErr"
        size="mini"
        value-format="yyyy-MM-dd"
        @change="dateChange"
        :picker-options="pickerOptionsNow"
        placeholder="开始日期"
      >
      </el-date-picker>
      <span class="zhi">至</span>
      <el-date-picker
        v-model="search.endTime"
        type="date"
        :class="dateErr"
        size="mini"
        value-format="yyyy-MM-dd"
        @change="dateChange"
        :picker-options="pickerOptionsNow"
        placeholder="结束日期"
      >
      </el-date-picker>
    </el-col>
    <el-col :span="6">
      <el-button size="mini" @click="resetData" plain>重置</el-button>
      <el-button type="primary" size="mini" @click="searchData" plain
        >查询</el-button
      >
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "DateSearch",
  props: ["fName"],
  data() {
    return {
      // 禁止选择将来
      pickerOptionsNow: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        }
      },
      search: {
        startTime: null,
        endTime: null,
        time: null
      },
      dateErr: null
    };
  },
  created() {
    // console.log(this.fName);
  },
  methods: {
    dateChange() {
      this.dateErr = null;
    },
    resetData() {
      this.search = {};
      // this.$emit(this.fName);
    },
    searchData() {
      const startTime = this.search.startTime;
      const endTime = this.search.endTime;
      const dateJudge =
        new Date(Date.parse(startTime)) > new Date(Date.parse(endTime));
      if (dateJudge) {
        this.dateErr = "date-err";
        Message({
          showClose: true,
          message: "结束日期不能小于开始日期",
          type: "error",
          duration: 2000
        });
      } else {
        const searchParams = {
          startTime,
          endTime
        };
        // this.$emit(this.fName, searchParams);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.search-box {
  .search-date {
    margin: 0 15px;
  }
  .zhi {
    margin: 0 10px;
    font-size: 12px;
    color: #ccc;
  }
  .date-err {
    /deep/ .el-input__inner {
      border-color: #f56c6c;
    }
  }
}
</style>
